<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Administrator</title>
<?php echo CHtml::scriptFile(Yii::app()->baseUrl.'/assets/js/jquery-1.6.1.js'); ?>
</head>

<body>


<style>
body{
	margin:0;
	background-color:#20377a;
	background-image:url(assets/images/bg_login.jpg);
	background-repeat:no-repeat;
	
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	
}
.container{
	width:70%;
	height:400px;
	
	background-color:#0065b9; 
	background-color:rgba(0,101,185, 0.5); 

	border:1px solid #0c80e1;
	/* for IE */
	/* filter:alpha(opacity=60); */
	/* CSS3 standard */
	background-opacity:0.5;
  
	margin:0 auto;
	margin-top:50px;
	font-family: 'Lucida Grande',verdana,arial,helvetica,sans-serif;
	font-size:12px;
	
	-moz-border-radius: 8px; 
	-webkit-border-radius: 8px;
	border-radius:8px;
	
	-moz-box-shadow: -2px 2px 3px #004075;
	-webkit-box-shadow: -2px 2px 3px #004075;
	box-shadow: -2px 2px 3px #004075;

	overflow:hidden;
}

.container .center{
	width:100%;
	height:90%;
	font-size:15px;
}

.container .border_bottom{
	width:100%;
	height:25px;
	background-color:#00527c;
	opacity:0.9;
	
	moz-border-top-left-radius: 8px; 
	-webkit-border-top-right-radius: 8px;
	border-top-left-radius:8px;
	border-top-right-radius:8px;

}
.form{
	width:100%;
	height:100%;
	margin:0 auto;
	
}

input[type='text'], input[type='password']{
	border:1px solid #efefef;
	border-collapse:collapse;
	background-color:#fff;
	padding:4px;
	color:#f00;
	font-size:14px;
	
	/* Firefox 3.6+ */ 
	background: -moz-linear-gradient(100% 100% 90deg, #fff, #eee); 
	/* Safari 4-5, Chrome 1-9 */ 
	/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#fff)); 
	/* Safari 5.1+, Chrome 10+ */
	 background: -webkit-linear-gradient(#eee, #fff); 
	/* Opera 11.10+ */ 
	background: -o-linear-gradient(#eee, #fff);
	
	-moz-border-radius: 4px; 
	-webkit-border-radius: 4px;
	border-radius:4px;
}

input[type='text']:focus, input[type='password']:focus{
	border:1px solid #fff;
	border-collapse:collapse;
	background-color:#fff;
	padding:4px;
	color:#f00;
	font-size:14px;
}

.btn_dangnhap{
	border:1px solid #009ffa;
	background:#ddd;
	padding:5px 10px 7px 10px;
	
	color:#fff;
	font-weight:bold;
	
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	border-radius:5px;
	
	-moz-box-shadow: 0px 0px 2px #555;
	-webkit-box-shadow: 0px 0px 2px #555;
	box-shadow: 0px 0px 2px #555;
	cursor:pointer;
	
	background-color:#009ffa;
	
	/* Firefox 3.6+ */ 
	background: -moz-linear-gradient(100% 100% 90deg, #006aca, #009ffa); 
	/* Safari 4-5, Chrome 1-9 */ 
	/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#009ffa), to(#006aca)); 
	/* Safari 5.1+, Chrome 10+ */
	 background: -webkit-linear-gradient(#009ffa, #006aca); 
	/* Opera 11.10+ */ 
	background: -o-linear-gradient(#009ffa, #006aca);
}

.btn_dangnhap:hover{
	border:1px solid #ffad77;
	background:#ddd;
	padding:5px 10px 7px 10px;
	color:#fff;
	font-weight:bold;
	
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	border-radius:5px;
	
	-moz-box-shadow: 0px 0px 2px #555;
	-webkit-box-shadow: 0px 0px 2px #555;
	box-shadow: 0px 0px 2px #555;
	cursor:pointer;
	
	background-color:#ff6600;
	
	/* Firefox 3.6+ */ 
	background: -moz-linear-gradient(100% 100% 90deg, #ff5b01, #ffad77); 
	/* Safari 4-5, Chrome 1-9 */ 
	/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffad77), to(#ff5b01)); 
	/* Safari 5.1+, Chrome 10+ */
	 background: -webkit-linear-gradient(#ffad77, #ff5b01); 
	/* Opera 11.10+ */ 
	background: -o-linear-gradient(#ffad77, #ff5b01);
}

</style>

<div class="container">
    <div class="center">
        <table cellpadding="3" cellspacing="0" width="100%" height="100%" border="0">
        <tr height="100%">
            <td valign="middle" align="center" width="380">
                <?php
                    echo CHtml::image(
						Yii::app()->baseUrl."/assets/images/login.png"
					);
					echo "<br />";
					
					echo "<span style='font-size:15px; 
						font-weight:bold; color:#b2e7ff; font-family: Tahoma, Geneva, sans-serif;
						text-shadow:-1px 2px 8px #333;
						'>";
						echo "<strong>" . $this->host_info . "</strong>";
					echo "</span>";
                ?>
            </td>
            <td  width="50">
            	<?php
                    echo CHtml::image(
						Yii::app()->baseUrl."/assets/images/border.png"
					);
                ?>
            </td>
            <td valign="top">
                <div class="form">
                <?php echo CHtml::beginForm(array($controller_id."/sign_in"),"post"); ?>
                <table width="100%" border="0" cellspacing="0" cellpadding="5">
                	
                    <tr style='height:50px;'>
                        <td colspan='2'>
                        </td>                   
                    </tr>
                    
                    <tr style='height:50px;'>
                        <td colspan='2'>
                        	<?php
								echo CHtml::image(
									Yii::app()->baseUrl."/assets/images/icon-login.png","",
									array("align"=>"absmiddle")
								);
								echo "<span style='font-size:15px; color:#f5f5f5;font-weight:bold;'>";
									echo " Đăng nhập hệ thống";
								echo "</span>";
							?>
                        </td>                   
                    </tr>
                  
					<?php
						echo "<tr style='height:28px;'>";
							echo "<td colspan='2' align='center'>";
						if ( isset($message))
						{
							echo "<div style='height:15px; padding: 5px; border-top: #f00 1px solid; 
							font-size:12px;	border-bottom: #d00 1px solid; 
								background-color:#fff5f5; color:#f00;'>";
								echo "$message" ;
							echo "</div>";	
						}
						echo "</td>";
							echo "</tr>";
						
                   ?>
                  <tr>
                    <td>
                        <?php
							echo "&nbsp;&nbsp;";
                            echo CHtml::textField(
								"username",
								"Username", 
								array("style"=>"width:250px","id"=>"username")
							);
                        ?>
                    </td>
                  </tr>
                  <tr>
                    <td>
                        <?php
							echo "&nbsp;&nbsp;";
                            echo CHtml::passwordField(
								"password",
								"Password", 
								array("style"=>"width:250px")
							);
                        ?>
                    </td>
                  </tr>
                  <tr>
                    <td>
                        <?php
							echo "&nbsp;&nbsp;";
                          	echo CHtml::submitButton(
								"Đăng nhập", 
								array("class"=>"btn_dangnhap")
							) ;
                        ?>
                    </td>
                  </tr>
                </table>
    
                </div>
            </td>
        </tr>
        </table>
        <?php echo CHtml::endForm(); ?>
    </div>
    
</div><!-- end div container -->
<script language="javascript">
$(document).ready(function() {
	$('#username').focus(function(){
		this.value = "";
	});
	
	$('#username').focusout(function(){
		if (this.value.length == 0)
			this.value = "<?php echo "Username"; ?>";
	});
	
	$('#password').focus(function(){
		this.value = "";
	});
	
	$('#password').focusout(function(){
		if (this.value.length == 0)
			this.value = "<?php echo "Password"; ?>";
	});
});
</script>
</body>
</html>